<template>
  <div class="page-heroList py-4 px-1">
    <div class="d-flex jc-between mb-3 px-2">
      <div :class="`${activeIdx === index ? 'active' : ''}`" v-for="(cat, index) in heroList" :key="index" @click="() => {activeIdx=index, $refs.list.swiper.slideTo(index)}">{{cat.name}}</div>
    </div>
    <swiper ref="list" :options="{autoHeight: true}" @slideChangeTransition="activeIdx = $refs.list.swiper.currentIndex">
      <swiper-slide class="d-flex flex-wrap jc-left" v-for="(cat, index) in heroList" :key="index">
        <router-link style="width:20%;" class="text-center p-2" :to="`/hero/${hero.ename}`" tag="div" v-for="hero in cat.heroes" :key="hero._id">
          <img class="w-100" :src="hero.avatar">
          <p class="mt-2">{{hero.name}}</p>
        </router-link>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>

export default {
  data () {
    return {
      heroList: [],
      activeIdx: 0
    }
  },
  methods: {
    async getHeroes () {
      const { data: res } = await this.$http.get('hero/list')
      const { data: all } = await this.$http.get('hero/all')
      res.splice(0, 1, all)
      this.heroList = res
    }
  },
  created () {
    this.getHeroes()
  }
}
</script>

<style lang="less" scoped>
.active {
  color: #db9e3f;
  border-bottom: 2px solid currentColor;
}
</style>
